import React, { memo } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";

import { getSongDetailAction } from '@/pages/player/store/actionCreators'
import { getSizeImage, formatMinuteSecond } from "@/utils/format-utils";

import HYThemeHeaderNormal from "@/components/theme-header-normal";
import { RankingListWrapper } from "./style";

export default memo(function HYRankingList() {
  const { playLists } = useSelector(
    (state) => ({
      playLists: state.getIn(["ranking", "playLists"]),
    }),
    shallowEqual
  );
  const tracks = playLists.tracks || [];
  const dispatch = useDispatch();
  // 点击按钮播放音乐
  const playMusic = (item) => {
    console.log('我点击了')
    dispatch(getSongDetailAction(item.id))
  }


  return (
    <RankingListWrapper>
      <HYThemeHeaderNormal />
      <div className="play-list">
        <table>
          <thead>
            <tr className="header">
              <th className="ranking"></th>
              <th className="ranking">标题</th>
              <th className="ranking">时长</th>
              <th className="ranking">歌手</th>
            </tr>
          </thead>
          <tbody>
            {tracks.map((item, index) => {
              return (
                <tr key={item.id}>
                  <td>
                    <div className="rank-num">
                      <span className="num">{index + 1}</span>
                      <span className="new sprite_icon2"></span>
                    </div>
                  </td>

                  <td>
                    <div className="song-name">
                      {index < 3 ? (
                        <img src={getSizeImage(item.al.picUrl, 50)} alt="" />
                      ) : null}
                      <span 
                        className="play sprite_table"
                        onClick={e => playMusic(item)}
                      ></span>
                      <div className="name">{item.name}</div>
                    </div>
                  </td>
                  <td>{formatMinuteSecond(item.dt)}</td>
                  <td>{item.ar[0].name}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </RankingListWrapper>
  );
});
